
<template>
    <p>这是一个组件</p>
    <p>{{ msg }}</p>
    <div v-html="spanHtml"></div>
    <!-- <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""> -->
  
    
   <!-- <img :src="imgUrl" alt=""> -->

   <button v-on:click="clickAction">点击事件</button>
   <button @click="clickAction">点击事件简写</button>

    <p>v-if</p>
    <p v-if="isActive">isActive 是 trun 222222</p>
    <p v-else>isActive 是 false 111111</p>
    <p v-show="isActive">isActive 是 trun showshpwshowshowshow</p>
    <button @click="switchIsActive">点击事件</button>
   
    <p v-if="num == 0">num 为 0</p>
    <p v-else-if="num == 1">num 为 1</p>
    <p v-else>num 非 0 非 1</p>
    <button @click="changeNum(0)">num设置为0</button>
    <button @click="changeNum(1)">num设置为1</button>
    <button @click="changeNum(2)">num设置为2</button>

    <p v-for="(item,index) in arr">item 是 {{ item }}, index 是 {{ index }}</p>
    <p v-for="(value,key,index) in obj">
    value 是 {{ value }},key 是 {{ key }},index 是 {{ index }}</p>
    <h2>配置信息</h2>
    <div>
        <table>昵称</table>
    <input type="text" v-model="user.name">
    </div>
    <div>
        <table>性别</table>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>
    <div>
        <table>心愿单：</table>
        <input type="checkbox" name="wish" v-memo="user.wish" value="iphone">iphone
        <input type="checkbox" name="wish" v-memo="user.wish" value="ipad">ipad
        <input type="checkbox" name="wish" v-memo="user.wish" value="iwatch">iwatch
        <input type="checkbox" name="wish" v-memo="user.wish" value="其它">其它

    </div>
    <div>
        <table>组号</table>
        <select v-memo="user.group" style="width: 100px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div>
        <table>备注</table>
        <textarea v-model="user.remark"></textarea>
    </div>

    <p>登录</p>
    <input type="text" placeholder="请输入你的账号" v-model="account">
    <input type="password" placeholder="请输入你的密码" v-model="password">

    <p>你的账号是{{ account }}</p>
    <p>你的密码是{{ password }}</p>
  </template>
  
  <script>
  export default{
    data(){
      return{
        msg :"hello world",
        spanHtml:"<span>这是一个标签</span>",
        imgUrl:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        isActive:true,
        num: 0,
        arr:["吃", "喝", "拉"],
        obj:{
            a:'吃',
            b:'喝',
            C:'拉'
        },
       
        user:{
            name:'',
            sec:'男',
            wish:'[]',
            group:'',
            remark:''
        },
        account:'',
        password:''
        
    }
  },
        methods:{
            clickAction(){
                console.log('123');
            },
        switchIsActive(){
            this.isActive = !this.isActive
        },
        changeNum(number){
            this.num = number
         
        }
            
        }
      }
  </script>